//搜索框
const inp = document.querySelector('.main>input')
const btn = document.querySelector('.main>button')
const li =document.querySelectorAll('.main>ul>li')
const ul = document.querySelector('.main>ul')
inp.oninput = function(){
    const worde = this.value.trim()
    const script = document.createElement('script')
    script.src = 'https://category.vip.com/ajax/getSuggest.php?callback=fn&keyword= '+ worde +' &_=1635428619443'
    document.body.appendChild(script)
    script.remove()
    // console.log(script);
}
function fn (res){
    console.log(res);
    if(res.data.length === 0)return ul.style.display = 'none'
    let str =''
    res.data.forEach(item => {
        str += `<li>${item.word}</li>`
    });
    ul.innerHTML =str
    ul.style.display = 'block'
}
$('.w12').on('blur', function () {
    $('.seach>li').click(function () {
        $('.w12').val($(this).text())
        $('.seach').html('')
        $('.seach').css('displat','none')
    })
})

//选项卡
$('.dul>li').click(function(){
   $('.dul>li').removeClass('active')
   $(this)
   .addClass('active')
   .parent()
   .next()
   .children()
   .eq($(this).index())
   .addClass('chuxian')
   .siblings()
   .removeClass('chuxian')
})
var arr 
//获取数据1
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery21107800643723763352_1635758186467',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort: 'pop',
        ad: 0,
        fcid: 50330,
        action: 'shoes',
        acm: '3.mce.1_10_1ko50.132244.0.toW0lsNvcejgG.pos_874-m_482174-sd_119',
        ptp: '31.nXjSr._head.0.vsIOgHNs',
        _: +new Date()
    },
    
        success:res =>{
            var arr = res.result.wall.docs
            var str = '';
            arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol').html(str)
        $('.xol>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
            
        }
    })

//获取数据2
$('.d1').click(function(){
    $.ajax({
        url:'https://list.mogu.com/search',
        dataType:'jsonp',
        data:{
            callback: 'jQuery211006888476106032293_1635770493021',
            '_version': 8193,
            ratio: '3:4',
            cKey: 15,
            page: 1,
            sort:' pop',
            ad: 0,
            fcid: 50240,
            action: 'clothing',
            acm: '3.mce.1_10_1ko4s.132244.0.3EWiUsNw2fhUZ.pos_871-m_482170-sd_119',
            ptp:' 31.nXjSr._head.0.SKHHyeMR',
            _: +new Date()
        },
        success:res =>{
        
            var arr = res.result.wall.docs
            var str = '';
            arr.forEach(item=>{
                str += `
                    <li>
                        <img src="${item.img}" width="250" height="300" />
                        <div>${item.title}</div>
                        <p>找相似</p>
                        <span>￥${item.price}</span>
                        <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                    </li>
                `
            })
            $('.xol1').html(str)
            $('.xol1>li').hover(function(){
                $(this).find('p').stop().slideDown()
            },function(){
                $(this).find('p').stop().slideUp()
            })
        }
    })
    })
//获取数据3
$('.d2').click(function(){
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery211025613298303657595_1635770940315',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort:' pop',
        ad: 0,
        fcid: 50020,
        action: 'trousers',
        acm: '3.mce.1_10_1ko4y.132244.0.2061ZsNw2i8nV.pos_873-m_482173-sd_119',
        ptp:' 31.Onv5v._head.30.KuL60H15',
        _: +new Date()
    },
    success:res =>{
        
        var arr = res.result.wall.docs
        var str = '';
        arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol2').html(str)
        $('.xol2>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
    }
})
})
//获取数据4
$('.d3').click(function(){
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery21101671290142316666_1635771158499',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort:' pop',
        ad: 0,
        fcid: 51894,
        action: 'magic',
        acm: '3.mce.1_10_1td6g.132244.0.bOU4nsNw4avfC.pos_875-m_685024-sd_119',
        ptp:' 31.vq4nWb._head.32.wTIHJwlD',
        _: +new Date()
    },
    success:res =>{
        var arr = res.result.wall.docs
        var str = '';
        arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol3').html(str)
        $('.xol3>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
    }
})
})
//获取数据5
$('.d4').click(function(){
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery21109740145215651699_1635771407775',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort:' pop',
        ad: 0,
        fcid: 50675,
        action: 'bags',
        acm: '3.mce.1_10_1ko54.132244.0.lCD35sNw5Gr7d.pos_876-m_482176-sd_119',
        ptp: '31.HOban._head.33.k98Exycj',
        _: +new Date()
    },
    success:res =>{
        var arr = res.result.wall.docs
        var str = '';
        arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol4').html(str)
        $('.xol4>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
    }
})
})
//获取数据6
$('.d5').click(function(){
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery21106475366119276784_1635771587356',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort:' pop',
        ad: 0,
        fcid: 50025,
        action: 'neiyi',
        acm: '3.mce.1_10_1ko5a.132244.0.lCD35sNw5Gr7f.pos_878-m_482179-sd_119',
        ptp: '31.HOban._head.35.k98Exycj',
        _: +new Date()
    },
    success:res =>{
        var arr = res.result.wall.docs
        var str = '';
        arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol5').html(str)
        $('.xol5>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
    }
})
})
//获取数据7
$('.d6').click(function(){
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery21105339172409283277_1635771673588',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort:' pop',
        ad: 0,
        fcid:'',
        action: 'boyfriend',
        acm: '3.mce.1_10_1ko5c.132244.0.lCD35sNw5Gr7g.pos_879-m_482180-sd_119',
        ptp: '31.HOban._head.36.k98Exycj',
        _: +new Date()
    },
    success:res =>{
        var arr = res.result.wall.docs
        var str = '';
        arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol6').html(str)
        $('.xol6>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
    }
})
})
//获取数据8
$('.d7').click(function(){
$.ajax({
    url:'https://list.mogu.com/search',
    dataType:'jsonp',
    data:{
        callback: 'jQuery211036061230206594286_1635771892248',
        '_version': 8193,
        ratio: '3:4',
        cKey: 15,
        page: 1,
        sort:' pop',
        ad: 0,
        fcid:20000602,
        action: 'baby',
        acm: '3.mce.1_10_1ko5e.132244.0.zAOvVsNw7fl1r.pos_880-m_482181-sd_119',
        ptp: '31.OifDKb._head.37.d0eS1Tqu',
        _: +new Date()
    },
    success:res =>{
        var arr = res.result.wall.docs
        var str = '';
        arr.forEach(item=>{
            str += `
                <li>
                    <img src="${item.img}" width="250" height="300" />
                    <div>${item.title}</div>
                    <p>找相似</p>
                    <span>￥${item.price}</span>
                    <span  style="float: right;margin-right:10px">点赞：${item.sale}</span>
                </li>
            `
        })
        $('.xol7').html(str)
        $('.xol7>li').hover(function(){
            $(this).find('p').stop().slideDown()
        },function(){
            $(this).find('p').stop().slideUp()
        })
    }
})
})


$("#pagination3").pagination({
    currentPage: 4,// 当前页数
    totalPage: 16,// 总页数
    isShow: true,// 是否显示首尾页
    count: 7,// 显示个数
    homePageText: "首页",// 首页文本
    endPageText: "尾页",// 尾页文本
    prevPageText: "上一页",// 上一页文本
    nextPageText: "下一页",// 下一页文本
    callback: function(current) {
        // 回调,current(当前页数)
    }
 });